<template>
    <div class="wrapper">
        <div class="name">
            <input type="text" placeholder="请输入核销码" @blur="blurInput"  v-model="id">
            <div class="submit" @click="submit">提 交</div>
        </div>

    </div>
</template>
<script>
    import request from "@/utils/request";
    import utils from "@/utils/utils";
    import {MessageBox} from "mint-ui";
    export default {
        data() {
            return {
                id: '',
                va: this.$route.query.va ? this.$route.query.va : '',
                isClick: false
            };
        },
        methods: {
            blurInput(e) {
                this.$nextTick(() => {
                    if (utils.browser.versions.ios ) {
                        setTimeout(function () {
                            e.target.scrollIntoView(false);
                        }, 300);
                    }
                });
            },
            submit(){
                let _self = this;
                if(!_self.isClick){
                    request
                        .get(_self.global.API_URL, {
                            action: "/activity/relay/RelayAction/verificationPrize",
                            requestParam: {
                                id: _self.id,
                                va: String(_self.va)
                            }
                        })
                        .then(response => {
                            if(response.obj==0){
                                return MessageBox.alert('兑奖码已失效！', "提示").then(()=>{
                                    _self.isClick = true
                                })

                            }
                            if(response.obj==1){
                                return MessageBox.alert('兑奖成功！', "提示").then(()=>{
                                    _self.isClick = true
                                })
                            }
                        });
                }

            }
        }

    }
</script>
<style lang="stylus" scoped>
    @import '~@/assets/styles/mixins.styl';
    .wrapper{
        position absolute
        top: 0
        left: 0
        bottom: 0
        right: 0
        background: url('http://rs.static.quanc.com.cn/activies/mfAct/rule.jpg') repeat center center;
        background-size: 100% 100%;
    }
    .name{
        height: 1rem
        width: 70%
        background: url('http://rs.static.quanc.com.cn/activies/mfAct/name.png') repeat center center;
        background-size: 100% 100%;
        position absolute
        top 4rem
        left 15%
    }
    input{
        color: #b1181e;
        width: 92%
        padding-left: 6%;
        height: 1rem;
        line-height: 1rem;
        background-color transparent
        border none
    }
    input::-webkit-input-placeholder {
        color: #b1181e;
        font-size: 14px;
    }
    .submit{
          width: 100%
          background-color #f7dc4d
          border-radius .3rem
          font-size .32rem
          height .8rem
          margin .5rem auto
          text-align center
          line-height .8rem
          color #d40a0d
          font-weight 600
      }

</style>